<template>
	<view class="check-stock-check-action-component">
		<view class="form-view">
			<scan-input-form-item
				label="库位码/托盘码"
				v-model="scanCode"
				@search="onSearchScanInput"
			/>
		</view>
		<scroll-view class="list-scroll-view" :scroll-y="true">
			<view class="list-items-around">
				<!-- ################# -->
				<view class="list-item" v-for="(item,index) in list" :key="'check-item-material-'+index">
					<view class="list-item-show">
						<view class="item-left">
							<uni-badge :text="index+1" type="primary" size="normal" />
						</view>
						<view class="item-main">
							<view class="item-row">
								<view class="label">物料</view>
								<view class="content auto-wrap">{{item.inventoryMateriaUnique}}</view>
							</view>
							<view class="item-row">
								<view class="label">库存</view>
								<view class="content">{{item.stockNumber}}</view>
							</view>
							<view class="item-row">
								<view class="label">实盘</view>
								<view class="content">
									<input class="easy-input" v-model="item.inventoryNumber" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- ################# -->
			</view>
		</scroll-view>
		<view class="bottom-btns-row">
			<view class="btn-frame"><u-button type="primary" text="提 交" @click="onSubmit"></u-button></view>
		</view>
	</view>
</template>

<script>
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import { $successInfo } from '@/static/js/utils/index.js'
export default {
	name:'checkStockCheckActionComponent',
	components:{ScanInputFormItem},
	props:{
		mainObj: {
		  type: Object,
		  default: function(){
				return {}
			}
		}
	},
	data(){
		return {
			scanCode:'',
			list:[]
		}
	},
	methods:{
		clear(){
			this.list = []
			this.scanCode = ''
		},
		onSearchScanInput(){
			this.getContainerInfo()
		},
		getContainerInfo(callback){
			let params = {
				InventoryPlanId:this.mainObj.id,
				ContainerVsLocation:this.scanCode
			}
			this.$api.get('ByContainerCodeGetInfo',params,{block:'checkStock'}).then(d=>{
				this.list = d || []
				callback && callback(true)
			}).catch(()=>{
				this.list = []
				callback && callback(false)
			})
		},
		onSubmit(){
			this.dealConfirm((f)=>{
				if (f) {
					$successInfo('操作成功')
					this.clear()
				}
			})
		},
		dealConfirm(callback ){
			let params = {inventoryPlanDetails:this.list}
			this.$api.post('InventorySure',params,{block:'checkStock'}).then(d=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		}
	}
}
</script>

<style scoped lang="scss">
.check-stock-check-action-component{
	height: 100%;
	display: flex;
	flex-direction: column;
	.easy-input{
		font-size: inherit;
		color: $uni-color-primary;
		text-decoration: underline;
	}
	.form-view,.bottom-btns-row{
		flex-shrink: 0;
	}
	.list-scroll-view{
		flex-grow: 1;
		height: 1px;
		.list-items-around{
			padding-top:12rpx;
			.list-item {
				margin-bottom: 12rpx;
				border-width: 2rpx 0;
				border-style: solid;
				border-color: $uni-border-color;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		.list-item-show{
			background-color: $uni-bg-color;
			font-size: 1.1em;
			display: flex;
			&>.item-left{
				flex-shrink: 0;
				padding-left: 16rpx;
				padding-top: 12rpx;
				padding-right: 12rpx;
			}
			&>.item-main{
				flex-grow: 1;
				width: 1px;
				padding-right: 16rpx;
			}
			.item-row{
				border-bottom: 2rpx dashed $uni-text-color-grey;
				display: flex;
				&>.label{
					opacity: .7;
					flex-shrink: 0;
					width: 80rpx;
					padding-top: 11rpx;
					.first-label-inner{
						display: flex;
						align-items: center;
						.batch-no{
							margin-left: 8rpx;
						}
					}
				}
				&>.content{
					width: 1px;
					flex-grow: 1;
					line-height: 1.5em;
					padding: 8rpx 0;
				}
				&:last-child{
					border-bottom: 0;
				}
			}
		}
	}
}
.bottom-btns-row{
	display: flex;
	padding: 10rpx 20rpx;
	background-color: #fff;
	.btn-frame{
		width: 1%;
		box-sizing: border-box;
		flex-grow: 1;
	}
	.divider{
		width: 20rpx;
		flex-shrink: 0;
	}
}
</style>